<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>优惠券列表-成都华联后台管理系统</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
        <script src="../../layui/layui.js" charset="utf-8"></script>
        <script>var $ = layui.jquery;</script>
    </head>
    <body>

        <table class="layui-hide" id="cpnList" lay-filter="cpnList"></table>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="addCp">新建优惠券</button>
                <button class="layui-btn layui-btn-sm" lay-event="exportCps">导出</button>
            </div>
        </script>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="details">详情</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
        </script>
        <script type="text/html" id="switchTpl">
            {{# if(d.inUse){}}
            <input type="checkbox" name="sxj" value="{{d.id}}" lay-skin="switch"
                   checked lay-text="上架|下架" lay-filter="sexDemo">
            {{# } else { }}
            <input type="checkbox" name="sxj" value="{{d.id}}" lay-skin="switch"
                   lay-text="上架|下架" lay-filter="sexDemo">
            {{# } }}
        </script>

        <script>
            console.log(document.cookie)
            layui.use(['form', 'table'], function () {
                var table = layui.table,
                    form = layui.form,
                    util = layui.util
                var currPage = 1;
                table.render({
                    elem: '#cpnList'
                    , url: '/coupon'
                    , headers: {"method": "selectByPage"}
                    , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    , title: '优惠券数据表'
                    , cols: [[
                        {
                            field: 'id',
                            title: '序号',
                            width: 100,
                            fixed: 'left',
                            align: 'center',
                            unresize: true,
                            sort: true
                        }
                        , {field: 'name', title: '名称', width: 150, align: 'center', sort: true}
                        , {
                            field: 'collectExpire', title: '领用有效期', width: 180, align: 'center', sort: true
                            , templet: function (d) {
                                return util.toDateString(d.collectExpire, "yyyy-MM-dd HH:mm:ss")
                            }
                        }
                        , {
                            field: 'useExpire', title: '使用有效期', width: 180, align: 'center', sort: true
                            , templet: function (d) {
                                return util.toDateString(d.useExpire, "yyyy-MM-dd HH:mm:ss")
                            }
                        }
                        , {
                            field: 'onoff', title: '上下架', width: 100, align: 'center'
                            , templet: '#switchTpl', unresize: true, sort: true
                        }
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center',}
                    ]]
                    , id: 'cpnList'
                    , page: true
                    , limit: 10
                    , limits: [5, 10]
                    , done: function (res, curr, count) {
                        currPage = curr;//将当前页码赋值给全局变量currPage
                    }
                });

                //头工具栏事件
                table.on('toolbar(cpnList)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'addCp':
                            layer.open({
                                type: 2
                                , title: "新建优惠券"
                                , area: ['620px', '550px']
                                , content: '/addCp'
                            });
                            break;
                        case 'exportCps':
                            layer.msg("导出中...");
                            window.location.href = '/couponExport';
                            break;
                    }
                });

                //监听行工具事件
                table.on('tool(cpnList)', function (obj) {
                    var data = obj.data;
                    // console.log(data)
                    if (obj.event === 'del') {
                        layer.confirm('确认删除该优惠券吗？', function (index) {
                            // 先写一个ajax进行数据库删除，再判断是否删除
                            $.ajax({
                                url: "/coupon"
                                , type: "post"
                                , headers: {"method": 'delCp'}
                                , data: {"id": data.id}
                                , dataType: "json"
                                , success: function (result) {
                                    if (result.code == 1) {
                                        obj.del();
                                    }
                                    layer.msg(result.msg);
                                }
                            })
                            layer.close(index);
                        });
                    } else if (obj.event === 'details') {
                        layer.open({
                            type: 2
                            , title: "优惠券详情"
                            , area: ['620px', '550px']
                            , content: '/detailsCp',
                            success: function (layero, index) {
                                var body = layer.getChildFrame('body', index);
                                body.find('#cpid').val(data.id);//传id
                                body.find('#cpname').val(data.name);
                                body.find('#cpdesc').val(data.desc);
                                body.find('#role').val(data.role);
                                body.find('#collectExpire').val(util.toDateString(data.collectExpire, "yyyy-MM-dd HH:mm:ss"));
                                body.find('#useExpire').val(util.toDateString(data.useExpire, "yyyy-MM-dd HH:mm:ss"));
                                body.find('#cpImg').val(data.img);
                                body.find('#img2').attr('src', data.img);
                            }
                        });
                    }
                });

                //监听上下架操作
                form.on('switch(sexDemo)', function (obj) {
                    var id = this.value;
                    if (obj.elem.checked) {
                        layer.confirm('确认上架吗？', {
                            cancel: function () {
                                table.reload('cpnList', {
                                    page: {
                                        curr: currPage //重新从第当前页开始
                                    }
                                });
                            }
                        }, function (index) {
                            off_on(id, 'on');
                            layer.close(index);
                        }, function () {
                            //取消和关闭窗口操作
                            table.reload('cpnList', {
                                page: {
                                    curr: currPage
                                }
                            });
                        });
                    } else {
                        layer.confirm('确认下架吗？', {
                            cancel: function () {
                                table.reload('cpnList', {
                                    page: {
                                        curr: currPage
                                    }
                                });
                            }
                        }, function (index) {
                            off_on(id, 'off');
                            layer.close(index);
                        }, function () {
                            table.reload('cpnList', {
                                page: {
                                    curr: currPage
                                }
                            });
                        });
                    }
                });
            });
        </script>

        <script>
            // 上下架ajax
            function off_on(id, offon) {
                $.ajax({
                    url: "/coupon"
                    , type: "post"
                    , headers: {"method": offon}
                    , data: {"id": id}
                    , dataType: "json"
                    , success: function (result) {
                        layer.msg(result.msg);
                    }
                })
            }
        </script>

    </body>
</html>